<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 注意: 文本插值语法不能自动识别标签, 因为它限制了自动识别标签功能,是为了防止有心人攻击该网站,从而出现一些不可预期的危险 -->
        {{mytext}}
        <!-- 如果传入的内容包含标签,请使用v-html使用 注意: 只有当你信任对方时才可以使用,否则请使用文本插值语法来避免风险 -->
        <div v-html="mytext"></div>
        <!-- 如自己的后台开发传递的使用v-html 用户发布的使用双 -->
    </div>
    <script>
        let obj = {
            data(){
                return {
                 mytext: `<p>文本插值限制了自动标签功能,是为了防止一些有心人攻击该网站</p>`
                }
            },
        }
        let app = Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>